<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>repository</title>
    <%--引入jquery和bootstrap方式--%>
    <link rel="stylesheet" href="/webjars/bootstrap/4.6.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/layout.css"/>
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        /*        .files {
                    display: flex;
                    flex-wrap: wrap;
                    !*justify-content: space-between;*!
                    width: 80%;
                }

                .card-dld {
                    width: 12rem;
                }

                .line {
                    display: flex;
                    justify-content: space-around;
                    height: 40px;
                }

                .card-title-dld{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }*/

        .container-dld {
            display: flex;
            flex-wrap: wrap;
        }

        .card-dld {
            width: 12rem;
        }

        .container-dld-ops {
            display: flex;
            justify-content: space-around;
            margin-top: 16px;
        }

        /*.card-text-dld{*/
        /*    white-space: nowrap;*/
        /*    overflow: hidden;*/
        /*    text-overflow: ellipsis;*/
        /*}*/
        /* 一键整理 左手ctrl alt 右手 l*/
        .card-text-dld {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="head-body-container">
    <div class="head">
        <jsp:include page="component/header.jsp"></jsp:include>
    </div>
    <div class="aside-main-container">
        <div class="aside">
            <jsp:include page="component/asider.jsp"></jsp:include>
        </div>
        <div class="main">

            <div class="container-dld">
                <c:forEach items="${fileToDownload}" var="i">
                    <div class="card card-dld">
                        <div class="card-header ">
                            <img class="card-img-top" src="/cardTitle.jpeg" alt="pic"/>
                        </div>
                        <div class="card-body">
                            <div data-toggle="popover" title="${i.title}" >
                                <div class="card-text card-text-dld" >${i.title}</div>
                            </div>
                            <div class="container-dld-ops">
                                <div>${i.size}B</div>
                                <a href="/download/${i.title}" class="btn btn-warning">下载</a>
                            </div>
                        </div>

                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>

<%--<div class="files">
    <c:forEach items="${fileToDownload}" var="i">
        <div class="card card-dld">
            <img class="card-img-top"  src="/cardTitle.jpeg" alt="Card image" style="width:100%">
            <div class="card-body">
                <div class="card-title card-title-dld"
                     data-toggle="popover" title="${i}">${i}</div>
                <div class="line">
                    <p class="card-text">size</p>
                    <a href="/download/${i}" class="btn btn-primary">下载</a>
                </div>

            </div>
        </div>
    </c:forEach>
</div>--%>

<script>
    $(function () { $("[data-toggle='popover']").popover(); });
</script>
</body>
</html>